<template>
  <layout-body height="100%">
    <div class="types-main">
      <div class="types-main-item">
        <div class="fw">满减券</div>
        <div class="mt5 fz12 text-grey">
          例：满100元减20元<br />便于合理控制活动成本
        </div>
        <el-button
          type="primary"
          class="mt10"
          size="small"
          @click="createClick('decrement', 0)"
          >立即创建</el-button
        >
      </div>
      <div class="types-main-item">
        <div class="fw">折扣券</div>
        <div class="mt5 fz12 text-grey">
          例：满100元打9折<br />提高店铺销量和客单价
        </div>
        <el-button
          type="primary"
          class="mt10"
          size="small"
          @click="createClick('discount', 0)"
          >立即创建</el-button
        >
      </div>
    </div>
    <!-- 列表 -->
    <el-table v-loading="initLoading" class="mt20" :data="lists" row-key="id">
    </el-table>
    <!-- 分页 -->
    <div class="flex end">
      <page :listPage="listPage" @change="pageChange"></page>
    </div>
    <!-- 添加 -->
    <addonCouponCreate
      ref="createCouponRef"
      @success="toInit()"
    ></addonCouponCreate>
  </layout-body>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import addonCouponCreate from "./create.vue";
import { useConfig } from "@/store";
import { listPageType } from "@/types";
const configStore = useConfig();

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const lists = ref<any>([]);

const toInit = () => {
  initLoading.value = false;
};
const createCouponRef = ref<HTMLElement>();

const createClick = (type: string, id: number) => {
  proxy?.$refs["createCouponRef"]?.open(type, id);
};


const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

onMounted(() => {
  toInit();
});
</script>

<style scoped>
.types-main {
  display: flex;
}
.types-main-item {
  width: 200px;
  background: #f7f8fa;
  text-align: center;
  padding: 20px;
  margin-right: 20px;
  border-radius: 2px;
}
</style>